<template>
  <tool-btn v-bind="$attrs">
    <template v-slot:search>
      <search-box
          v-bind="$attrs"
      ></search-box>
    </template>
  </tool-btn>
  <div class="public_com">
    <slot name="publicLeft"></slot>
    <div style="width: 100%">
      <paginate-com
          v-bind="$attrs"
      >
      </paginate-com>
      <tzs-table
          v-bind="$attrs"
          ref="tzsTableRef"
      >
        <template v-slot:tableHead="item">
          <slot name="tableHead" :item="item.item"></slot>
        </template>
        <template v-slot:tableColumn="scope">
          <slot name="tableColumn" :scope="scope.scope"></slot>
        </template>
      </tzs-table>
    </div>
  </div>
</template>

<script>
import {ref} from "vue"

export default {
  name: "publicCommon",
  components: {},
  data() {
    return {}
  },
  setup() {
    const tzsTableRef = ref();
    const x = () => {
      console.log("xxxx")
    }
    return {
      x,
      tzsTableRef
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.public_com {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: flex-start;
  background: #fff;
}
</style>